<template>
  <div>
    <!-- <Add ref="add" @ok="search"></Add> -->
    <Edit ref="edit" @ok="search"></Edit>
    <!-- <Batch ref="batch" @ok="search"></Batch> -->
    <ZgAttach
      ref="attach"
      :showBtn="false"
      tableName="test"
      :attTypeArr="attTypeArr"></ZgAttach>
    <ZgSort
      ref="sort"
      :showBtn="false"
      @ok="handleSort"></ZgSort>
    <ZgDataImport
      ref="import"
      :showBtn="false"
      fileName="test.xlsx"
      url="/dict/import"
      @ok="search"></ZgDataImport>
    <ZgNewPage
      ref="page"
      title="消息中心"
      addBtnName="添加数据"
      :pageOpt="pageOpt"
      :batchBtns="batchBtns"
      :dataBtns="dataBtns"
      :conditions="conditions"
      @search="onSearch"
      @filter="onFilter"
      @add="toAdd"
      @batch="toBatch"
      @admin="toAdmin"
      @condition="onSearchWithCondition"
    >
      <template slot="columns">
        <a-table-column
          v-for="(column,i) in columns"
          :key="`column${i}`"
          :width="column.width"
          :title="column.label">
          <template slot-scope="record">
            {{ record[column.code] }}
          </template>
        </a-table-column>
      </template>
      <template slot="thMode" slot-scope="scope">
        <a-row :gutter="10">
          <a-col :span="4" v-for="t in scope.list" :key="`thMode_${t.id}`">
            <a-card class="mb10">
              <div class="wfull h100 scroll">
                {{ t }}
              </div>
            </a-card>
          </a-col>
        </a-row>
      </template>
      <!-- <template slot="headerConfig">
        <HeaderConfig ref="headerConfig" @change="mergeHeader"></HeaderConfig>
      </template> -->
    </ZgNewPage>
  </div>
</template>
<script>
// import Add from './Add'
import Edit from './Edit'
import { pageMessage } from '@/api/message'
export default {
  components: {
     Edit
  },
  data () {
    return {
      pageOpt: {
        showSearchBtn: true,
        showRefreshBtn: true,
        showConditionBtn: true,
        showHeaderConfig: true,
        showAttachBtn: true,
        showLayoutMode: true
      },
      columns: [
        { code: 'title', label: '标题', width: 120, isShow: true },
        { code: 'type', label: '类型', width: 120, isShow: true },
        { code: 'typeCn', label: '类型', width: 120, isShow: true },
        { code: 'content', label: '内容', width: 120, isShow: true }
      ],
      conditions: [
        { code: 'title', compType: '单行文本', label: '标题', defaultVal: '' },
        { code: 'type', compType: '下拉选择', label: '类型', defaultVal: '', extra: { 下拉选项: [{ value: 'sms', label: '短信' }, { value: 'email', label: '邮件' }, { value: 'inbox', label: '站内信' }] } }
      ],
      batchBtns: [
        { key: 1, label: '批量删除' }
        // { key: 2, label: '批量修改' },
        // { key: 3, label: '数据排序' },
        // { key: 4, label: 'Excel导入' },
        // { key: 5, label: 'Excel导出' }
      ],
      dataBtns: [
        { key: 1, name: '删除', icon: 'fa-trash', isShow: () => { return true } },
        { key: 2, name: '修改', icon: 'fa-pencil', isShow: () => { return true } }
      ],
      attTypeArr: [
        { name: '附件1', type: '.png', limit: 10 },
        { name: '附件2', type: '.xlsx', limit: 10 }
      ],
      uniqueName: 'test'
    }
  },
  methods: {
    search () {
      this.$refs.page.search()
    },
    onSearch (param) {
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      this.doPageMessage(param)
    },
    onSearchWithCondition (param) {
      this.doPageMessage(param)
    },
    doPageMessage (param) {
      pageMessage(param, res => {
        this.$refs.page.endSearch({
          total: Number(res.total),
          list: res.records.map(t => {
            t.key = t.id
            return t
          })
        })
      })
    },

    onFilter (f, param) {
    },
    toAdd () {
      this.$refs.add.open()
    },
    toAdmin (param) {
      if (param.key === 1) {
        this.confirm(
        () => {
          this.$http.post('/zg-message/message/template/remove', [param.obj.id], () => {
            this.search()
          })
        },
        '确定要删除这条数据么')
      } else if (param.key === 2) {
        this.$refs.edit.open(param.obj)
      } else if (param.key === 3) {
        this.$refs.attach.open(param.obj)
      }
    },
    toBatch (opt) {
      if (opt.key === 1) {
        this.$refs.page.checkIds(ids => {
          this.$http.post('del-url', ids, () => {
            this.search()
          })
        }, '确定要批量删除这些数据')
      } else if (opt.key === 2) {
        this.$refs.page.checkIds(ids => {
          this.$refs.batch.open(ids)
        }, '确定要批量修改这些数据')
      } else if (opt.key === 3) {
        const list = this.$refs.page.getList()
        this.$refs.sort.open(list)
      } else if (opt.key === 4) {
        this.$refs.import.open()
      } else if (opt.key === 5) {
        this.$http.download('/zg-system/dict/export', {}, '字典数据.xlsx')
      }
    },
    handleSort (result) {
      alert(JSON.stringify(result.map(t => {
        return {
          id: t.id,
          sort: t.index
        }
      })))
    },
    mergeHeader (headers) {
      if (!headers) {
        return
      }
      this.columns = headers.filter(t => {
        return t.isShow
      }).sort((a, b) => {
        return a.sort - b.sort
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
